<template>
  <!-- 新碟上架 -->
  <div class="n-new">
    <div class="n-hd">
      <router-link to="/discover/album" class="n-title">新碟上架</router-link>
      <span class="more"
        ><router-link to="/discover/album">更多</router-link><em class="more-arrow"></em
      ></span>
    </div>
    <div class="n-dist">
      <a href="javascript:;" class="roll-forward" @click="distForwardRoll"></a>
      <div class="roll-wrap" ref="DistRollRef">
        <ul
          v-for="i in 4"
          :key="i"
          :style="{
            left: -645 + (i - 1) * 645 + 'px',
            transitionProperty: 'all',
            transitionDuration: '0s',
            transitionTimingFunction: 'ease',
            transitionDelay: '0s'
          }"
        >
          <li v-for="item in i % 2 ? newDistList2 : newDistList1" :key="item.id">
            <div class="cover">
              <img :src="item.blurPicUrl + '?param=100y100'" />
              <router-link
                :to="'/album?id=' + item.id"
                class="msk u-coverall"
                :title="item.name"
              ></router-link>
              <a href="javascript:;" class="icon-play u-iconall" @click="setAlbumList(item.id)"></a>
            </div>
            <p class="albumName">
              <router-link :to="'/album?id=' + item.id" :title="item.name">{{
                item.name
              }}</router-link>
            </p>
            <p class="artistName">
              <router-link
                :to="`/artist?id=${art.id}`"
                :title="art.name"
                v-for="(art, i) in item.artists"
                :key="art.id"
                >{{ i == item.artists.length - 1 ? art.name : art.name + '/' }}</router-link
              >
            </p>
          </li>
        </ul>
      </div>
      <a href="javascript:;" class="roll-back" @click="distBackRoll"></a>
    </div>
  </div>
</template>

<script>
import { albumNewest, albumDetail } from '@/api/album.js'
export default {
  data() {
    return {
      // 当前滚动的dist
      currentDist: 1,
      // 新碟上架数据
      newDistList1: [],
      newDistList2: []
    }
  },
  methods: {
    // 获取新碟上架数据
    async getNewDistList() {
      const { data } = await albumNewest()
      // console.log('newdist', data)
      const products = data.albums
      this.newDistList1 = products.slice(0, 5)
      this.newDistList2 = products.slice(5, 10)
    },
    // 新碟上架向前滚动
    distForwardRoll() {
      this.currentDist = this.currentDist - 1 < 0 ? 3 : this.currentDist - 1
      const preDist = this.currentDist - 1 < 0 ? 3 : this.currentDist - 1
      const backDist = this.currentDist + 1 > 3 ? 0 : this.currentDist + 1
      const distRollList = this.$refs.DistRollRef.childNodes
      distRollList.forEach(item => {
        item.style.transitionProperty = 'all'
        item.style.transitionDuration = '0s'
      })
      distRollList[this.currentDist].style.left = '0px'
      distRollList[backDist].style.left = '645px'
      distRollList[this.currentDist].style.transitionProperty = 'left'
      distRollList[this.currentDist].style.transitionDuration = '1s'
      distRollList[backDist].style.transitionProperty = 'left'
      distRollList[backDist].style.transitionDuration = '1s'
      distRollList[preDist].style.left = '-645px'
    },
    // 新碟上架向后滚动
    distBackRoll() {
      this.currentDist = this.currentDist + 1 > 3 ? 0 : this.currentDist + 1
      const preDist = this.currentDist - 1 < 0 ? 3 : this.currentDist - 1
      const backDist = this.currentDist + 1 > 3 ? 0 : this.currentDist + 1
      const distRollList = this.$refs.DistRollRef.childNodes
      distRollList.forEach(item => {
        item.style.transitionProperty = 'all'
        item.style.transitionDuration = '0s'
      })
      distRollList[this.currentDist].style.left = '0px'
      distRollList[preDist].style.left = '-645px'
      distRollList[this.currentDist].style.transitionProperty = 'left'
      distRollList[this.currentDist].style.transitionDuration = '1s'
      distRollList[preDist].style.transitionProperty = 'left'
      distRollList[preDist].style.transitionDuration = '1s'
      distRollList[backDist].style.left = '645px'
    },
    // 将碟片的列表更新播放列表
    async setAlbumList(id) {
      const { data } = await albumDetail(id)
      const tracks = data.songs
      // console.log(tracks)
      this.$store.commit('Music/isPlayTrue')
      this.$store.commit('Music/setplayerSettingIndex', 0)
      this.$store.commit('Music/setSongList', tracks)
    }
  },
  created() {
    this.getNewDistList()
  }
}
</script>

<style lang="less" scoped>
@import './albumnewest.less';
</style>
